class SingleSpa {
    constructor() {
        this.apps = [];
        this.currentApp = null;
    }

    registerApp(name, app, activeWhen) {
        this.apps.push({ name, app, activeWhen });
    }

    start() {
        window.addEventListener('hashchange', () => this.route());
        this.route(); // Trigger routing on start
    }

    route() {
        const path = window.location.hash.slice(1) || '/';
        const appToMount = this.apps.find(app => app.activeWhen(path));

        if (appToMount && this.currentApp !== appToMount) {
            if (this.currentApp) {
                this.currentApp.app.unmount();
            }
            this.currentApp = appToMount;
            appToMount.app.mount();
        }
    }
}

// Example usage
const app1 = {
    mount() {
        const container = document.getElementById('app-container');
        container.innerHTML = '<h1>App 1</h1>';
    },
    unmount() {
        const container = document.getElementById('app-container');
        container.innerHTML = '';
    }
};

const app2 = {
    mount() {
        const container = document.getElementById('app-container');
        container.innerHTML = '<h1>App 2</h1>';
    },
    unmount() {
        const container = document.getElementById('app-container');
        container.innerHTML = '';
    }
};

const spa = new SingleSpa();
spa.registerApp('app1', app1, path => path === '/app1');
spa.registerApp('app2', app2, path => path === '/app2');
spa.start();